<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="彭俊超">
    <title>改变图片的路径</title>
    <style>
       section{
           width: 400px;
           height:530px;
           margin:100px auto;
           background-color:brown;
           padding:5px;
       }
       ul{
           margin:0px;
           padding:0px;
           list-style: none;
       }
       li{
           float:left;
           width:128px;
           height:128px;
           background-color:green;
           margin-left:5px;
           margin-bottom: 5px;
           border-radius:10px;
       }
       .first{
           width:261px;
           height:261px;
       }
        img{
           width:100%;
           border-radius:10px;
       }
    </style>
</head>

<body>
    <section>
        <ul>
            <li class="first"><img src="img/1.jpg" alt="" data-xxx='0'></li>
            <li><img src="img/2.jpg" alt="" data-xxx='1'></li>
            <li><img src="img/3.jpg" alt="" data-xxx='2'></li>
            <li><img src="img/4.jpg" alt="" data-xxx='3'></li>
            <li><img src="img/5.jpg" alt="" data-xxx='4'></li>
            <li><img src="img/6.jpg" alt="" data-xxx='5'></li>
            <li><img src="img/7.jpg" alt="" data-xxx='6'></li>
            <li><img src="img/8.jpg" alt="" data-xxx='7'></li>
            <li><img src="img/9.jpg" alt="" data-xxx='8'></li>
        </ul>
    </section>
</body>

</html>
<script>
    var imgs = document.querySelectorAll('img');
    var first = document.querySelector('.first img');
    var arr = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg','img/7.jpg',
    'img/8.jpg','img/9.jpg']
    for(var i = 0; i < imgs.length; i++){
        imgs[i].index = i;
        imgs[i].onmouseover = function(){
            first.src = arr[this.dataset.xxx];
        }
    }
</script>